<template>
	<div>
		<el-card class="filter-container" shadow="never">
			<div>
				<i class="el-icon-search"></i>
				<span>筛选搜索</span>
				<el-button style="margin-left: 15px" type="primary" @click="handleSearchList()" size="small">查询搜索
				</el-button>
				<el-button style="margin-left: 15px" @click="handleResetSearch()" size="small">重置</el-button>
			</div>
			<div style="margin-top: 15px">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="手机号查询：">
						<el-input v-model="listQuery.referMobile" class="input-width" placeholder="请输入业务员手机号">
						</el-input>
					</el-form-item>

					<el-form-item label="佣金来源类型：">
						<el-select v-model="listQuery.type" class="input-width" placeholder="点击选择" clearable>
							<el-option v-for="item in typeData" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="支付时间：">
						<el-date-picker v-model="listQuery.time" type="daterange" align="right"
							value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<div style="margin-top: 15px;margin-bottom: 15px;">
		    <span style="margin-left: 30px;font-weight:bold;" >总佣金金额:{{sumMoney}}元</span>
		</div>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="money" label="奖励佣金金额">
			</el-table-column>
			<el-table-column prop="status" label="奖励佣金状态">
				<template slot-scope="scope">
					<span> {{scope.row.status == 1 ?'已发' :'待发'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="typeText" label="类型">
			</el-table-column>
			<el-table-column prop="remark" label="备注">
			</el-table-column>
			<el-table-column prop="nickname" label="来源用户">
			</el-table-column>
			<el-table-column prop="referUser" label="业务员昵称">
			</el-table-column>
			<el-table-column prop="referMobile" label="业务员手机号">
			</el-table-column>
			<el-table-column align="center" prop="addTime" label="记录添加时间" width="180">
			</el-table-column>
			<el-table-column prop="payDate" label="奖励发放日期">
			</el-table-column>
		</el-table>
		<el-pagination style="text-align: center; margin: 20px 0" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 20, 30, 40]"
			:page-size="listQuery.size" layout="total, prev, pager, next, sizes,jumper" :total="listQuery.listCount">
		</el-pagination>
	</div>
</template>

<script>
	import axios from "axios";
	// 手机号 注册时间 头像  昵称
	export default {
		data() {
			return {

				tableData: [],
				sumMoney:0.00,
				listQuery: {
					page: 1,
					size: 10,
					listCount: 0,
				},
				// 佣金来源类型（1商品 2积分 3年卡））
				typeData: [{
						label: "商品",
						value: 1,
					},
					{
						label: "积分",
						value: 2,
					},
					{
						label: "年卡",
						value: 3,
					},
				],
			}
		},
		created() {
			if(sessionStorage.getItem("listQuery")){
				this.listQuery = JSON.parse(sessionStorage.getItem("listQuery"))
			}
			
			this.initPage();
		},
		methods: {
			initPage() {
				let that = this;
				let data = this.listQuery;
				if (data && data.time && data.time.length > 1) {
					
					data.beginTime = data.time[0];
					data.endTime = data.time[1];
				}
				console.log(data)
				axios.get("FreshAgentAward/awardList", {
					params: data
				}).then(function(response) {
					let res = response.data;
					if (res.code === 1) {
						that.listQuery.listCount = res.data.count;
						that.tableData = res.data.list;
						that.sumMoney = res.data.sumMoney;
					} else {
						that.$Message.error(res.msg);
					}
				});
			},
			handleSearchList() {
				this.listQuery.page = 1;
				this.initPage();
			},
			handleResetSearch() {
				this.listQuery.page = 1;
				this.initPage();
			},

			/**
			 * 底部表格
			 */
			handleSizeChange(size) {
				this.listQuery.page = 1;
				this.listQuery.size = size;
				this.initPage();
			},
			handleCurrentChange(page) {
				sessionStorage.setItem("listQuery",JSON.stringify(this.listQuery))
				this.listQuery.page = page;
				this.initPage();
			},
			changePage(page) {
				sessionStorage.setItem("listQuery",JSON.stringify(this.listQuery))
				this.listQuery.page = page;
				this.initPage();
				
			},
			changeSize(size) {
				this.listQuery.page = 1;
				this.listQuery.size = size;
				this.initPage();
			},
		}
	}
</script>
